import { Children, useState } from "react"
import { childrenMap } from "../util/Utils"
import './style.less'
/**
 * 
 * @param {*} activeKey 决定显示哪个TabPanel的状态值
 * @param {*} onChange activeKey改变事件
 * @param {*} underLineStyle 下划线自定义样式
 */
function Tabs(props){
    let {activeKey, type, children, onChange, underLineStyle} = props
    const [activeIdx, setActiveIdx] =  useState(0)
    return <div className="d-tabs">
        <div className="d-tabs-title">
            {childrenMap(children).map((child, idx)=>{
                return <TabTitle active={activeIdx === idx} id={child.props.id} onClick={(key)=>{
                    onChange && onChange(key)
                    setActiveIdx(idx)
                }} key={idx}>{child.props.title}</TabTitle>
            })}
            <TabUnderLine style={{
                width:`${(100/Children.count(children))}%`,
                left:`${(100/Children.count(children)) * activeIdx}%`
            }} underLineStyle={{...underLineStyle}}></TabUnderLine>
        </div>
        <div className="d-tabs-body">
            {childrenMap(children).map((child, idx)=>{
                if(activeKey === child.props.id){
                    return child
                }
                return null                
            })}
        </div>
    </div>
}
/**
 * 
 * @param {*} title 标题
 * @param {*} id 对应Tabs的activeKey
 * @param {*} align 水平对齐方式
 * @param {*} justify 垂直方向对齐方式
 */
function TabPanel(props){
    let {title, children, id, align, justify} = props
    return <div key={title} id={id} style={{display:'flex', alignItems: align, justifyContent: justify}} className="d-tabPanel">
        {children}
    </div>
}
/**
 * @name 标题
 * @param {*} onClick 点击事件
 * @param {*} id 对应Tabs的activeKey
 */
function TabTitle(props){
    let {children, onClick, id, active} = props
    return <div className={`d-tabs-title-item ${active?'d-tabs-title-item-active':''}`} onClick={()=>{
        onClick && onClick(id)
    }}>{children}</div>
}
/**
 * @name 下划线
 * @underLineStyle 下划线样式
*/
function TabUnderLine(props){
    let {style, underLineStyle} = props
    return <div className="d-tabs-title-item-underline" style={style}>
        <div className="d-tabs-title-item-underline-color" style={{...underLineStyle}}></div>
    </div>
}
Tabs.TabPanel = TabPanel

export default Tabs